
{include file="jptweb/head" /}

    <title>新媒体数据排行榜</title>

</head>
<body>
<!--导航栏-->
{include file="jptweb/header" /}
<!--导航栏 end-->
<div class="wrapper">
    <div class="jpt_charts main">
        <div class="page_title">新媒体活跃指数</div>
        <div class="page_nav1">
            <div id="placezl" class="nav_item active" onclick="placezl()">总览</div>
            <div id="place" class="nav_item" onclick="place()">按地区</div>
        </div>
        <div class="page_nav2">
          <a href="{:url('demo/jptweb/chartsregion')}" class="nav_item active"> 地区活跃度</a>
          <a href="{:url('demo/jptweb/chartsMedia')}" class="nav_item">媒体类型活跃度</a>
          <a href="{:url('demo/jptweb/chartsactivity')}" class="nav_item">活动类型活跃度</a>
        </div>

        <div id="" class="dayepicker jpt_flex">
            <label class="jpt_label" for="datapic1"> 时间选择：</label>
            <input id="datapic1" type="text" placeholder="2017-08-08" class="pick input-text radius size-M">
            <label class="jpt_label placepick" for="datapic1"> 区域选择：</label>
            <span class="select-box placepick">
                <select class="select" name="province"></select>
                </span>
            <span class="select-box placepick">
            <select class="select" name="city"></select>
    </span>
            <span class="select-box placepick">
            <select class="select" name="area"></select>
                    </span>
        </div>

        <script>
            //执行一个laydate实例
            laydate.render({
                elem: '#datapic1' //指定元素
            });
        </script>


        <table  class="jpt_table table table-border table-bordered ">
            <thead class="text-c">
            <tr>
                <td width="20%">排名</td>
                <td width="20%">公众号</td>
                <td width="20%">文章发布频率</td>
                <td width="20%"> 活动举办频率</td>
                <td width="20%">地区活跃度</td>
            </tr>
            </thead>
            <tbody class="text-c">
              <tr>
                  <td>1</td>
                  <td>小蘑菇</td>
                  <td>12</td>
                  <td>21</td>
                  <td>32</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>小蘑菇</td>
                  <td>12</td>
                  <td>21</td>
                  <td>32</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>小蘑菇</td>
                  <td>12</td>
                  <td>21</td>
                  <td>32</td>
              </tr>

              <tr>
                  <td>1</td>
                  <td>小蘑菇</td>
                  <td>12</td>
                  <td>21</td>
                  <td>32</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>小蘑菇</td>
                  <td>12</td>
                  <td>21</td>
                  <td>32</td>
              </tr>
               <tr>
                    <td>1</td>
                    <td>小蘑菇</td>
                    <td>12</td>
                    <td>21</td>
                    <td>32</td>
                </tr>
            </tbody>

        </table>
        <div class="view_more  text-c">

            <a href="">点击显示更多</a>

        </div>

    </div>


    {include file="jptweb/footer" /}
</div>


<script>

    var nav = responsiveNav("#Hui-navbar", { // Selector

        customToggle: "#nav-toggle", // String: Label for the navigation toggle

    });

    new PCAS("province", "city", "area");
    function placezl() {
        $('.placepick').hide();
        $("#place").removeClass("active");
        $("#placezl").addClass("active");
    }

    function place() {
        $('.placepick').show();
        $("#placezl").removeClass("active");
        $("#place").addClass("active");
    }
</script>
</body>
</html>
